<template>
	<el-row>
		<el-col :span="8">
			<!-- 			<el-icon @click="insertdialogFormVisible=true">
				<Plus />
			</el-icon> -->
			<el-button @click="tempp">
				批量删除
			</el-button>
		</el-col>
		<el-col :span="16">
			<el-button type="primary" style="margin-left: 16px" @click="drawer = true">
				添加部门
			</el-button>
			<!-- 添加搜索框 -->
			<el-input class="search" v-model="wangCai.string" placeholder="输入需要查询的部门" :suffix-icon="Search" />
			<el-button @click="searchDept">
				<el-icon>
					<Search />
				</el-icon>
			</el-button>

			<!-- 添加部门 -->
			<el-drawer v-model="drawer" title="添加部门" :with-header="false">
				<span>
					<el-form :label-position="labelposition" lable-width="100px"
						style="max-width: 350px;margin: 0px auto;">
						<el-form-item label="部门类型">
							<el-select v-model="addDept.depType" class="m-2" placeholder="Select" value-key="deptId">
								<el-option v-for="d in DeptArr" :value="d" :lable="d" />
							</el-select>
						</el-form-item>
						<el-form-item>
							请输入部门的名字:
							<el-input v-model="addDept.deptName" placeholder="请输入部门的名字" />
						</el-form-item>
						<el-form-item>
							请输入部门的描述:
							<el-input v-model="addDept.depDescribe" placeholder="请输入部门的描述" />
						</el-form-item>
						<el-form-item>
							请输入部门的电话:
							<el-input v-model="addDept.depPhone" minlength=7 maxlength="7" placeholder="请输入部门的电话"
								show-word-limit type="text" />

							<!-- <el-input v-model="addDept.depPhone" placeholder="请输入部门的电话" /> -->
						</el-form-item>
						<el-button @click="saveInsert">确定</el-button>
						<el-button @click="drawer=false">取消</el-button>
					</el-form>
				</span>
			</el-drawer>

			<!-- 显示查询到的部门 -->
			<el-drawer v-model="drawer_search" title="查询结果显示" :with-header="false" size="1200px">
				<span>
					<el-form :label-position="labelposition" lable-width="100px"
						style="max-width: 1200px;margin: 0px auto;">
						<el-table :data="searchList" stripe style="width: 90%"
							@selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55" />
							<el-table-column prop="deptName" label="部门名称" width="160" />
							<el-table-column prop="depPhone" label="部门电话" width="140" />
							<el-table-column prop="depType" label="部门类型" width="140" />
							<!-- 		<el-table-column prop="phone" label="联系方式" /> -->
							<el-table-column prop="depDate" label="创建时间" width="160" />
							<el-table-column>
								<template #default="scope">
									<el-button @click="saveDelete(scope.row)">
										<el-icon>
											<Delete />
										</el-icon>
									</el-button>
									<el-button @click="openUpdate(scope.row)">
										<el-icon>
											<EditPen />
										</el-icon>
									</el-button>


									<el-button text @click="usersList(scope.row)">查看人员</el-button>
									<el-drawer v-model="table" title="该部门下的人员" direction="ltr" size="50%">
										<el-table :data="userss">
											<el-table-column property="userId" label="用户工号" width="150" />
											<el-table-column property="userName" label="用户名" width="150" />
											<el-table-column property="userSex" label="性别" width="200" />
											<el-table-column property="userPosition" label="职位" />
										</el-table>
									</el-drawer>


								</template>

							</el-table-column>
						</el-table>
						<el-button @click="drawer_search=false">关闭</el-button>
					</el-form>
				</span>
			</el-drawer>
		</el-col>
	</el-row>

	<!-- 显示数据库查询出来的所有部门信息 -->
	<el-table :data="subDepts" stripe style="width: 90%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column prop="deptName" label="部门名称" width="160" />
		<el-table-column prop="depPhone" label="部门电话" width="140" />
		<el-table-column prop="depType" label="部门类型" width="140" />
		<!-- 		<el-table-column prop="phone" label="联系方式" /> -->
		<el-table-column prop="depDate" label="创建时间" width="160" />
		<el-table-column>
			<template #default="scope">
				<el-button @click="saveDelete(scope.row)">
					<el-icon>
						<Delete />
					</el-icon>
				</el-button>
				<el-button @click="openUpdate(scope.row)">
					<el-icon>
						<EditPen />
					</el-icon>
				</el-button>


				<el-button text @click="usersList(scope.row)">查看人员</el-button>
				<el-drawer v-model="table" title="该部门下的人员" direction="ltr" size="50%">
					<el-table :data="userss">
						<el-table-column property="userId" label="用户工号" width="150" />
						<el-table-column property="userName" label="用户名" width="150" />
						<el-table-column property="userSex" label="性别" width="200" />
						<el-table-column property="userPosition" label="职位" />
					</el-table>
				</el-drawer>


			</template>

		</el-table-column>
	</el-table>
	<!-- 分页 -->
	<el-row>
		<el-col :span="8"></el-col>
		<el-col :span="12">
			<el-pagination background layout="prev, pager, next" @current-change="doPaging" :page-size="pageSize"
				:total="depts.length" />
		</el-col>
	</el-row>
	<!-- 修改对话框 -->
	<el-dialog v-model="updatedialogFormVisible" title="修改部门">
		<el-form :label-position="labelposition" lable-width="100px" style="max-width: 350px;margin: 0px auto;">
			<el-form-item label="部门类型">
				<el-select v-model="updateDept.depType" class="m-2" placeholder="Select">
					<el-option v-for="d in DeptArr" :lable="d" :value="d" />
				</el-select>
			</el-form-item>

			<el-form-item label="更新部门的名字">
				<el-input v-model="updateDept.deptName" placeholder="请输入部门的名字" />
			</el-form-item>
			<el-form-item label="更新部门的电话">
				<el-input v-model="updateDept.deptPhone" placeholder="请输入部门的电话" />
			</el-form-item>

			<el-button @click="saveUpdate">确定</el-button>
			<el-button @click="updatedialogFormVisible=false">取消</el-button>
		</el-form>
	</el-dialog>
</template>

<script>
	import qs from 'qs'
	import {
		ElMessage
	} from 'element-plus'

	export default {
		data() {
			return {
				ifselect: false,
				pageSize: 4,
				depts: [],
				subDepts: [],
				insertdialogFormVisible: false,
				updatedialogFormVisible: false,
				addDept: {},
				updateDept: {},
				deptIdArr: [],
				drawer: false,
				DeptArr: ['开发', '管理', '产品', '运营', '后勤'],
				table: false,
				users: [],
				userss: [],
				temp: {},
				tempDelete: {},
				wangCai: {},
				searchList: [],
				drawer_search: false

			}
		},
		methods: {
			searchDept() {
				this.drawer_search = true
				console.log(this.wangCai)
				let that = this
				let str = qs.stringify(that.wangCai)
				this.$axios.get("http://localhost:8080/department/search?" + str).then(function(res) {
					that.searchList = res.data
					console.log(that.searchList)
				})
			},
			deptsList() {
				let that = this
				this.$axios.get("http://localhost:8080/department/list").then(function(res) {
					console.log(res)
					that.depts = res.data
					that.subDepts = that.depts.slice(0, that.pageSize)
				})
			},
			doPaging(curr) {
				// 根据当前页  推算当前页应该显示第几行数据到第几行数据
				//  currPage  pagesize    start  to
				//    1			3			0	3
				// 	  2			3			3	6
				let start = (curr - 1) * this.pageSize
				let end = curr * this.pageSize
				this.subDepts = this.depts.slice(start, end)

			},
			deptsDelete() {
				let ids = []
				for (let i = 0; i < this.deptIdArr.length; i++) {
					ids.push(this.deptIdArr[i].deptId)
				}
				this.$axios.get("http://localhost:8080/department/mutipleDelete?ids=" + ids).then(function(res) {})
			},
			tempp() {
				this.deptsDelete()
				this.deptsList()
			},
			handleSelectionChange(arr) {

				this.deptIdArr = arr
			},
			saveDelete(row) {
				let that = this
				that.tempDelete.bothSidesId = row.deptId
				let str = qs.stringify(that.tempDelete)
				this.$axios.get("http://localhost:8080/department/delete?" + str).then(function(res) {
					if (res.data == true) {
						that.deptsList()
					}
				})
			},
			openUpdate(row) {
				this.updateDept = row
				this.updatedialogFormVisible = true
			},

			usersList(row) {
				let that = this
				that.table = true
				that.temp.bothSidesId = row.deptId
				console.log(that.temp)
				let str = qs.stringify(that.temp)
				this.$axios.get("http://localhost:8080/department/showUsers?" + str).then(function(res) {
					that.userss = res.data
				})
			},
			saveUpdate() {

				let that = this
				that.updateDept.users = null
				let str = qs.stringify(that.updateDept)
				console.log(str)
				this.$axios.get("http://localhost:8080/department/update?" + str).then(function(res) {
					if (res.data == true) {
						ElMessage({
							message: '修改成功！',
							type: 'success',

						})
						// 删除弹框的遮罩层
						that.updatedialogFormVisible = false
						that.deptsList()
					} else {
						ElMessage.error('修改失败！')
					}

				})

			},
			saveInsert() {
				let that = this
				let str = qs.stringify(that.addDept)
				this.$axios.get("http://localhost:8080/department/insert?" + str).then(function(res) {
					if (res.data == true) {
						ElMessage({
							message: '添加成功！',
							type: 'success',

						})
						// 删除弹框的遮罩层
						that.drawer = false
						that.deptsList()
					} else {
						ElMessage.error('添加失败！')
					}

				})
			}

		},
		created() {
			this.deptsList()
		}
	}
</script>

<style>
	.el-table {
		margin: 10px auto;
	}

	.search {
		width: 30%;
	}
</style>
